<template>
  <view class="circle-bg">
    <!-- 背景图片 -->
    <image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>
    <!-- 自定义顶部栏 -->
    <view class="custom-navbar">
      <view class="navbar-left">
        <image class="navbar-avatar" :src="userInfo.avatar || '/static/avatar-default.png'" />
        <button class="navbar-add-btn" @tap="onPublish"><text>＋</text></button>
      </view>
      <view class="navbar-title">烤友圈子</view>
      <view class="navbar-right"></view>
    </view>
    <!-- 动态列表 -->
    <view v-for="item in postList" :key="item.id" class="post-card glass-effect">
      <view class="post-header">
        <image class="post-avatar" :src="item.avatar || '/static/avatar-default.png'" />
        <view class="post-meta">
          <view class="post-nick">{{ item.nickname }}</view>
          <view class="post-date">{{ item.date }}</view>
        </view>
      </view>
      <view class="post-content">
        <text>{{ item.content }}</text>
        <view v-if="item.expandable" class="expand-link" @tap="onExpand(item)">展开</view>
      </view>
      <!-- 评论区 -->
      <view v-if="item.comments && item.comments.length" class="comment-list">
        <view v-for="(c, idx) in item.comments" :key="idx" class="comment-item">
          <text class="comment-nick">{{ c.nickname }}</text>
          <text class="comment-content">{{ c.content }}</text>
        </view>
      </view>
      <!-- 点赞/评论 -->
      <view class="post-actions">
        <view class="action-btn" @tap="onLike(item)">
          <image src="/static/icon-like.png" class="action-icon" />
          <text>{{ item.likeCount }}</text>
        </view>
        <view class="action-btn" @tap="onComment(item)">
          <image src="/static/icon-comment.png" class="action-icon" />
          <text>{{ item.commentCount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: ''
      },
      postList: []
    }
  },
  onLoad() {
    this.fetchUserInfo();
    this.fetchPostList();
  },
  methods: {
    // 预留：获取当前用户信息接口
    async fetchUserInfo() {
      // TODO: 调用后端API获取当前用户信息
      // const res = await uni.request({ url: '/api/user/info' })
      // this.userInfo = res.data
    },
    // 预留：获取动态列表接口
    async fetchPostList() {
      // TODO: 调用后端API获取动态列表
      // const res = await uni.request({ url: '/api/circle/list' })
      // this.postList = res.data
      // mock数据
      this.postList = [
        {
          id: 1,
          avatar: '',
          nickname: '小野同学12877',
          date: '2025-02-26',
          content: '大家这次考的怎么样',
          expandable: true,
          likeCount: 1,
          commentCount: 5,
          comments: [
            { nickname: '小野的…', content: '同学考的四级还是六级呀' },
            { nickname: '小野同学', content: '不好。有点差距，得继续复习' },
            { nickname: '小野的…', content: '刷题刷起来~' },
            { nickname: '小野同…', content: '想知道大概该怎么复习，真的忘光完了' },
            { nickname: '小野的…', content: '刷题，背单词😊' }
          ]
        },
        {
          id: 2,
          avatar: '',
          nickname: '小野的小野同学',
          date: '2024-12-12',
          content: '英语四级作文万能开头\n1. 关于人们的观点：\n- Many people insist that ...（很多人坚持认为……）\n- With the development of science and technology, more a...（随着科技发展，越来越多的人……）',
          expandable: true,
          likeCount: 7,
          commentCount: 1,
          comments: [
            { nickname: '小野同…', content: '666' }
          ]
        }
      ]
    },
    // 预留：发布文章
    onPublish() {
      // TODO: 跳转到发布文章页
    },
    // 预留：展开全文
    onExpand(item) {
      // TODO: 展开全文逻辑
    },
    // 预留：点赞
    onLike(item) {
      // TODO: 点赞接口
    },
    // 预留：评论
    onComment(item) {
      // TODO: 评论功能
    }
  }
}
</script>

<style lang="scss">
.circle-bg {
  min-height: 100vh;
  position: relative;
  padding-bottom: 32rpx;
}
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  background: transparent;
  padding-top: calc(env(safe-area-inset-top) + 70px);
  box-sizing: border-box;
  margin-bottom: 60rpx;
}
.navbar-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.navbar-avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: #fff;
  border: 2rpx solid #eaeaea;
}
.navbar-add-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: #fff;
  border: none;
  font-size: 32rpx;
  color: #283b66;
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  margin-left: -48rpx; /* 让标题居中视觉更好 */
}
.navbar-right {
  width: 48rpx;
  height: 48rpx;
}
.circle-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx 0 0;
  height: 88rpx;
}
.topbar-spacer {
  flex: 1;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 18rpx;
}
.circle-add-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #fff;
  border: none;
  font-size: 36rpx;
  color: #283b66;
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: #fff;
  border: 2rpx solid #eaeaea;
}
.circle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 0 32rpx;
}
.circle-title {
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  flex: 1;
  text-align: center;
}
.circle-add-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #fff;
  border: none;
  font-size: 36rpx;
  color: #283b66;
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-header-btns {
  display: flex;
  gap: 16rpx;
}
.icon-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #fff;
  border: none;
  font-size: 28rpx;
  color: #222;
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.08);
}
.post-card {
  margin: 32rpx 24rpx 0 24rpx;
  border-radius: 24rpx;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.06);
  padding: 0 0 24rpx 0;
  overflow: hidden;
}
.glass-effect {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.post-header {
  display: flex;
  align-items: center;
  padding: 24rpx 24rpx 0 24rpx;
}
.post-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: #fff;
  border: 2rpx solid #eaeaea;
}
.post-meta {
  margin-left: 18rpx;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}
.post-nick {
  font-size: 28rpx;
  color: #283b66;
  font-weight: bold;
}
.post-date {
  font-size: 22rpx;
  color: #8a98b3;
}
.post-content {
  font-size: 28rpx;
  color: #222;
  padding: 18rpx 24rpx 0 24rpx;
  white-space: pre-line;
}
.expand-link {
  color: #283b66;
  font-size: 24rpx;
  margin-top: 8rpx;
}
.comment-list {
  background: #f6f7fa;
  border-radius: 16rpx;
  margin: 18rpx 24rpx 0 24rpx;
  padding: 16rpx 18rpx;
}
.comment-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #222;
  margin-bottom: 8rpx;
}
.comment-item:last-child {
  margin-bottom: 0;
}
.comment-nick {
  color: #283b66;
  font-weight: bold;
  margin-right: 8rpx;
}
.comment-content {
  color: #222;
}
.post-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32rpx;
  padding: 18rpx 24rpx 0 24rpx;
}
.action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #283b66;
  font-size: 28rpx;
}
.action-icon {
  width: 32rpx;
  height: 32rpx;
}
</style> 